The subject disclosure generally relates to increasing performance of websites and web applications, and, in particular, decreasing web page load time.
When a web browser navigates to a web page, it first requests and fetches the base page using HTTP protocol. After receiving the base page from the server, the web browser parses it, and renders or generates its Document Object Model (DOM). After the initial rendering, the web browser can send additional requests, react to user input or other external inputs and trigger rendering additional elements of the DOM or re-rendering (updating) some of the existing DOM elements.
The browser may then display the web document (i.e. a webpage) to a user by referencing the DOM and rendering the DOM tree elements. As the DOM tree is updated, the browser detects the updated DOM elements and re-renders all or part of the web document according to the updated DOM tree until all elements of the DOM tree are rendered.
Reflow is the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering all or part of the document. Sometimes reflowing a single element in the document may require reflowing its parent elements and also any elements which follow it. For example, changes at one level in the DOM tree can cause changes at every level of the tree—all the way up to the root, and all the way down into the children of the modified node. This leads to more time being spent performing reflow.
Because reflow is a user-blocking operation in the browser, it may be desirable to reduce reflow time to improve the time to render a web document displayed to the user.